<template>
  <view class="register-container">
	<view class="register-content">
	  <view class="register-form">
		<input 
		  type="email" 
		  v-model="email" 
		  placeholder="请输入邮箱"
		/>
		<View class="input-group">
			<input 
				type="text" 
				v-model="emailCode" 
				placeholder="请输入邮箱验证码"
			/>
			<button 
				class="send-code-btn" 
				:disabled="countdown > 0"
				@click="sendEmailCode"
			>
				{{ countdown > 0 ? `${countdown}s` : '发送邮箱验证码' }}
			</button>
		</View>	

		<input
			type="password"
			v-model="password"
			placeholder="请输入密码"
		/>
		<input
			type="password"
			v-model="confirmPassword"
			placeholder="请输入确认密码"
		/>
		
		<!-- <view class="input-wrapper  login-form">
		  <input class="custom-input" type="text" v-model="captchaCodeText"  placeholder="请输入图片验证码" maxlength="4" ></input>
		  <image class="input-icon" :src="captchaCodeImage" mode="widthFix" @click="refreshCaptcha" />
		</view> -->
		<!-- <input 
		  type="text" 
		  v-model="username" 
		  placeholder="请输入用户名"
		/> -->
		<!-- <input 
			type="number" 
			v-model="phone" 
			placeholder="请输入手机号"
			maxlength="11"/>
		<view class="input-group">
		  <input 
			type="text" 
			v-model="smsCode" 
			placeholder="请输入短信验证码"
			maxlength="4"
		  />
		  <button 
			class="send-code-btn" 
			:disabled="countdown > 0"
			@click="sendVerificationCode"
		  >
			{{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
		  </button>
		</view> -->

		
		<button class="submit-btn" @click="handleRegisterByEmail">注册</button>
		<view class="login-link" @click="goToLogin">
		  已有账号？立即登录
		</view>
	  </view>
	</view>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 表单数据
const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const phone = ref('')
const smsCode = ref('1111')
const countdown = ref(0)
const captchaId = ref('')
const captchaCodeText = ref('')
const captchaCodeImage = ref('')

//邮箱验证码注册方式
const email = ref('')
const emailCode = ref('')
let timer = null;

onMounted(async() => {
  // TODO: 判断用户是否已登录
  refreshCaptcha();
  
})

const refreshCaptcha = async() => {
  // TODO: 刷新验证码
  try{
  	  let res = await userStore.getImgCode();
	  const { captchaId:chaId , data } = res;
	  captchaId.value = chaId;
	  captchaCodeImage.value = data;
  }catch(error){
  	  console.log('userStore.getImgCode error',error);
  }
}

//开始倒计时
const startCountdown = () => {
	countdown.value = 60
	timer = setInterval(() => {
	  countdown.value--
	  if (countdown.value <= 0) {
		clearInterval(timer)
		countdown.value = 0
		timer = null;
	  }
	}, 1000)
}

// 发送验证码
const sendVerificationCode = async () => {
  if (!phone.value) {
	uni.showToast({
	  title: '请输入手机号',
	  icon: 'none'
	})
	return
  }

  //验证图片验证码
  if(!captchaId.value || !captchaCodeText.value ){
	uni.showToast({
	  title: '图片验证码异常',
	  icon: 'none'
	})
   return
  }
  
  try {
	// TODO: 调用发送验证码接口
	await userStore.sendSmsCode(phone.value,captchaId.value,captchaCodeText.value)
  } catch (error) {
	console.log('userStore.sendSmsCode error',error);
	uni.showToast({
	  title: '发送验证码失败:' + error.message,
	  icon: 'none'
	})
  }
}

// 注册
const handleRegisterByName = async () => {
  if (!username.value || !password.value || !phone.value || !smsCode.value || !captchaCodeText.value ) {
	uni.showToast({
	  title: '请填写完整信息',
	  icon: 'none'
	})
	return
  }
  
  try {
	// TODO: 调用注册接口
	await userStore.register({
	  username: username.value,
	  password: password.value,
	  phone: phone.value,
	  smsCode: smsCode.value
	})
	uni.showToast({
	  title: '注册成功',
	  icon: 'success'
	})
	uni.navigateTo({
	  url: '/pages/login/index'
	})
  } catch (error) {
	uni.showToast({
	  title: '注册失败:' + error.message,
	  icon: 'none'
	})
  }
}

//发送邮箱验证码
const sendEmailCode = async () => {
    if (!email.value) {
        uni.showToast({
        title: '请输入邮箱',
        icon: 'none'
        })
        return
    }		

    try {
        // TODO: 调用发送邮箱验证码接口
        await userStore.sendEmailCode({email:email.value,type:0})
        startCountdown();
        uni.showToast({
            title: '邮箱验证码发送成功',
            icon: 'success'
        })
    } catch (error) {
        console.log('userStore.sendEmailCode error',error);
        uni.showToast({
            title: '邮箱验证码发送失败:' + error.message,
            icon: 'none'
        })
    }
}




//邮箱验证码注册
const handleRegisterByEmail = async () => {
  if (!email.value || !emailCode.value || !password.value || !confirmPassword.value) {
	uni.showToast({
	  title: '请填写完整信息',	
	  icon: 'none'
	})
	return
  }	

  if(password.value !== confirmPassword.value){
	uni.showToast({
	  title: '密码不一致',
	  icon: 'none'
	})
	return
  }


  try {
	// TODO: 调用邮箱验证码注册接口
	await userStore.registerByEmail({
	  email: email.value,
	  emailCode: emailCode.value,
	  password: password.value,
	  confirmPassword: confirmPassword.value
	})
	uni.showToast({
	  title: '注册成功',
	  icon: 'success'
	})
	uni.navigateTo({
	  url: '/pages/login/index'
	})
  } catch (error) {
	uni.showToast({
	  title: '注册失败:' + error.message,
	  icon: 'none'
	})
  }
}



// 跳转到登录页
const goToLogin = () => {
	uni.reLaunch({
		url: '/pages/login/index'
	})
}
</script>

<style lang="scss">
.register-container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.register-content {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
}

.register-form {
	input {
		height: 80rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		border: 2rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
  	.input-group {
		display: flex;
	
		input {
	  		flex: 1;  
		}
	
		.send-code-btn {
			height: 80rpx;
			line-height:80rpx;
			margin-left: 20rpx;
			background-color: #007AFF;
			color: #fff;
			font-size: 24rpx;
			border-radius: 8rpx;
			
			&:disabled {
				background-color: #ccc;
			}
		}
  }
  
	.submit-btn {
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.login-link {
		text-align: center;
		color: #007AFF;
		font-size: 28rpx;
	}
}

.input-wrapper {
	position: relative;
	display: inline-block; /* 或者使用 flex，根据需要 */
	width: 100%; /* 根据需要调整宽度 */
	.custom-input {
	}
	 
	.input-icon {
	  position: absolute;
	  right: 10px; /* 图标距离输入框右侧的距离 */
	  top: 40%;
	  transform: translateY(-60%); /* 垂直居中 */
	  width: 200rpx; /* 根据需要调整图标大小 */
	  height: 50rpx;
	z-index: 99;
	}
  }
</style> 